<template>
  <div class="terminal-container">
    <ContainerHeader 
      v-if="headerList.length"
      :headerList="headerList"
      @handleCurrentChange="handleCurrentChange"
    /> 
    <div class="terminal-content">
      <template v-for="item in components" :key="item.key">
        <div 
          v-show="activeComponent?.key === item.key" 
          class="terminal-panel"
        >
          <VirtualTerminalItem
            :ip="item.ip"
            :port="Number(item.port)"
            :isActive="activeComponent?.key === item.key"
          />
        </div>
      </template>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'VirtualTerminal',
})
</script>
<script setup  lang="ts">
import VirtualTerminalItem from './virtualTerminalItem.vue'
import {VirtualTerminalApi} from '@/api/virtualTerminal'
const headerList = ref<any>([])
const activeComponent = ref<any>(null)
let components:any = []
async function getVirtualTerminalInfo(){
    const {data} = await VirtualTerminalApi.reqGetVirtualTerminalInfo()
    headerList.value = data.vtLis.filter((item:any)=>item.type !== 'stream').map((item:any)=>{
        return {
            name:item.name,
            key:item.name,
            ip:item.ip,
            port:item.port
        }
    })
    components = headerList.value.map((item:any)=>{
        return {
            key: item.key,
            ip:item.ip,
            port:item.port
        }
    })
    activeComponent.value = components[0]
}
function handleCurrentChange(item:any){
    const existingComponent = components.find((i:any)=>i.key ==item.key)
    activeComponent.value = existingComponent
}
onMounted(()=>{
    getVirtualTerminalInfo()
})
</script>

<style lang="scss" scoped>
.terminal-container {
  height: auto;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: visible;
}

.terminal-content {
  flex: 1;
  position: relative;
  height: auto;
  overflow: visible;
}

.terminal-panel {
  width: 100%;
  height: auto;
  overflow: visible;
}
</style>
